<template>
  <div id="credential">

    <view-box style="100vh" ref="viewBox" body-padding-top="60px" body-padding-bottom="0px">
      <div id="x-header">

        <x-header slot="header" :left-options="{backText: ''}" style="width:100%;position:absolute;left:0;top:0;z-index:100;" :title="'证书下载'" :transition="headerTransition">
          <a href="./#/racelist" style="font-size:24px" slot="right">
            <i class="fa fa-home fa-fw"></i>
          </a>

        </x-header>
      </div>

      <div v-if='show'>
        <div class="index-topf">
          <h2>{{title}}</h2>
          <group class="top-group">
            <x-input class="weui-vcode" v-model="indexNumber" :placeholder="$t('index.enter')" :is-type="isIdNumber">
            </x-input>
            <!--<x-input placeholder="请填写验证码" v-model="code" class="weui-vcode">-->
            <!--<x-button :disabled='clock' slot="right" type="primary" @click.native="countDown" mini>{{codeMessage}}-->
            <!--</x-button>
        </x-input>-->

          </group>

          <div style="padding-left: 10px;padding-right: 10px;margin-top: 10px;margin-bottom: 10px">
            <x-button type="primary" :disabled="buttonFlag" @click.native="getKey()">查询</x-button>
          </div>
        </div>
      </div>

      <div v-if='!show' class="wrapper">
        <div class="box">
          <x-button mini type="primary" @click.native="reloadImg()">重新生成</x-button>
          <img ref="img" v-bind:src="certificateImg" @load="succeedImg" alt="">
        </div>
      </div>

      <!-- <myFooter></myFooter> -->
      

        <div v-if='pageType!="baoming"' id="tabbar">
          <tabbar style="position: fixed;max-width: 850px;bottom: 0;">
            <tabbar-item link="/racelist">

              <span slot="label">赛事</span>
            </tabbar-item>
            <!-- <tabbar-item link="/newlist">

              <span slot="label">新闻</span>
            </tabbar-item> -->
            <tabbar-item link="/user">

              <span slot="label">个人</span>
            </tabbar-item>

          </tabbar>
        </div>
      

    </view-box>

  </div>
</template>

<script type="text/ecmascript-6">
/* eslint-disable*/
import Myheader from "@/common/components/myheader.vue";
import {
  Tabbar,
  TabbarItem,
  XButton,
  XImg,
  Toast,
  ToastPlugin,
  XHeader,
  ViewBox,
  Group,
  XInput
} from "vux";
import myFooter from "@/common/components/myfooter.vue";
import Vue from "vue";
import mixin from "@/common/js/mixin";
import { isIdNumber, setTitle } from "@/common/js/main.js";
import qs from "qs";

Vue.use(ToastPlugin);
import { cookie } from "vux";

const FastClick = require("fastclick");
FastClick.attach(document.body);

export default {
  mixins: [mixin],
  data() {
    return {
      src: "//img4.imgtn.bdimg.com/it/u=4122890797,962616289&fm=27&gp=0.jpg",
      clock: false,
      show: true,
      buttonFlag: true,
      certificateImg: "",
      title: "",
      indexNumber: ""
    };
  },
  computed: {
    headerTransition() {
      if (!this.direction) return "";
      return this.direction === "forward"
        ? "vux-header-fade-in-right"
        : "vux-header-fade-in-left";
    }
  },
  created() {
    window.localStorage.getItem("isQuery");

    if (
      //如果没有_sid就去登录
      typeof cookie.get("_sid") == "undefined" ||
      (window.localStorage.getItem("isLogin") == "false" ||
        window.localStorage.getItem("isQuery") == "true")
    ) {
      this.title = "证书下载";
      setTitle(this.title);
      this.isShowScores = true;
      this.raceId = this.$route.query.race_id;
      //没有登录查询的逻辑
      //this.$router.push({ path: "login" });
    } else {
      this.raceId = this.$route.query.race_id;
    }
  },
  methods: {
    isIdNumber: function(value) {
      this.buttonFlag = !isIdNumber(value) && this.code != "";
      return {
        valid: isIdNumber(value),
        msg: "请输入正确的证件号"
      };
    },
    getKey() {
      let _this = this;

      this.axios
        .post(
          `${window.host}registration/query`,
          qs.stringify({
            raceid: this.raceId,
            idnum: this.indexNumber
          })
        )
        .then(res => {
          if (res.data.code == 200) {
            this.key = res.data.data[0]["_key"];
            window.history.pushState(
              {},
              0,
              "//" +
                window.location.host +
                window.location.pathname +
                "#/credential?key=" +
                this.key
            );
            this.queryScores(this.key);
          } else {
            _this.$vux.toast.show({
              text: res.data.msg,
              type: "warn"
            });
          }
        });
    },
    reloadImg() {
      this.src = `//img4.imgtn.bdimg.com/it/u=4122890797,962616289&fm=27&gp=0.jpg?t=${Math.random()}`;
      this.clock = true;
      this.$refs.img.style.display = "none";
    },
    succeedImg() {
      this.$refs.img.style.display = "block";
      if (this.clock) {
        this.$vux.toast.show({
          text: "已重新生成成功"
        });
      }
    },
    queryScores(key) {
      let _this = this;
      //查询成绩
      console.log(this.key);
      this.axios
        .get(`${window.host}timing/reports/fetch`, {
          params: {
            _key: this.key,
            raceid: this.raceId
          }
        })
        .then(res => {
          // res.data = {
          //   code: "200",
          //   msg: "success",
          //   data: [
          //     {
          //       name: "王跃科",
          //       bib: "A10454",
          //       gender: "male",
          //       birth: "1982-02-10",
          //       event: {
          //         id: 1,
          //         raceid: 11,
          //         name: "全程马拉松/Marathon",
          //         scale: 20000,
          //         reserve: 0,
          //         reg_begin: "2017-12-22 14:00:00",
          //         reg_end: "2018-01-08 22:00:00",
          //         pay_begin: null,
          //         pay_end: "2018-01-20 10:00:00",
          //         time: "2018-03-25 07:30:00",
          //         duration: "06:15:00",
          //         distance: 421950,
          //         min_birth: "1998-12-31",
          //         max_birth: null,
          //         male: 1,
          //         female: 1,
          //         price: "160.000",
          //         state: "draw",
          //         allow_wait: 1,
          //         payable: 0,
          //         refundable: 1,
          //         created_at: "2017-12-18 21:20:49",
          //         updated_at: "2018-01-19 15:20:43",
          //         deleted_at: null,
          //         display: 1,
          //         passwd: null,
          //         formid: 1,
          //         form: {
          //           id: 1,
          //           siteid: 12,
          //           subject: "马拉松",
          //           fields: [
          //             {
          //               type: "text",
          //               required: true,
          //               label: "姓名",
          //               placeholder: "请填写真实姓名",
          //               name: "name",
          //               subtype: "text"
          //             },
          //             {
          //               type: "radio-group",
          //               required: true,
          //               label: "性别",
          //               description: "请选择性别",
          //               name: "gender",
          //               values: [
          //                 {
          //                   label: "男",
          //                   value: "male"
          //                 },
          //                 {
          //                   label: "女",
          //                   value: "female"
          //                 }
          //               ]
          //             },
          //             {
          //               type: "date",
          //               required: true,
          //               label: "出生日期",
          //               placeholder: "请选择出生日期",
          //               name: "birth"
          //             },
          //             {
          //               type: "text",
          //               subtype: "tel",
          //               required: true,
          //               label: "手机号",
          //               placeholder: "请填写正确手机号码以便接收赛会信息",
          //               name: "mobile"
          //             },
          //             {
          //               type: "text",
          //               subtype: "email",
          //               required: true,
          //               label: "邮箱",
          //               placeholder: "请填写正确邮箱地址以便接收赛会信息",
          //               name: "email"
          //             },
          //             {
          //               type: "text",
          //               required: true,
          //               label: "紧急联系人",
          //               placeholder: "请填写紧急情况下的联系人称谓",
          //               name: "emername",
          //               subtype: "text"
          //             },
          //             {
          //               type: "text",
          //               subtype: "tel",
          //               required: true,
          //               label: "紧急联系人电话",
          //               placeholder: "请填写紧急情况下的联系电话（很重要）",
          //               name: "emertel"
          //             },
          //             {
          //               type: "text",
          //               required: true,
          //               label: "居住城市",
          //               placeholder: "请选择居住城市",
          //               name: "city",
          //               subtype: "address"
          //             },
          //             {
          //               type: "text",
          //               required: true,
          //               label: "邮寄地址",
          //               placeholder: "填写可以用于您接收快递的地址",
          //               name: "address",
          //               subtype: "text"
          //             },
          //             {
          //               type: "radio-group",
          //               required: true,
          //               label: "血型",
          //               name: "blood",
          //               values: [
          //                 {
          //                   label: "A",
          //                   value: "A"
          //                 },
          //                 {
          //                   label: "B",
          //                   value: "B"
          //                 },
          //                 {
          //                   label: "AB",
          //                   value: "AB"
          //                 },
          //                 {
          //                   label: "O",
          //                   value: "O"
          //                 },
          //                 {
          //                   label: "不清楚自己血型",
          //                   value: "Other"
          //                 }
          //               ]
          //             }
          //           ],
          //           created_at: "2017-12-18 20:59:35",
          //           updated_at: "2017-12-18 23:29:52",
          //           deleted_at: null
          //         },
          //         remain: 1479,
          //         paystate: "close",
          //         reg_able: false
          //       },
          //       report: {
          //         id: 4645,
          //         raceid: 11,
          //         eventid: 1,
          //         bib: "A10454",
          //         nettime: "03:10:25",
          //         time: "03:10:40",
          //         penalty: null,
          //         reason: null,
          //         split: [
          //           {
          //             name: "5公里",
          //             distance: 5,
          //             time: "00:21:02"
          //           },
          //           {
          //             name: "10公里",
          //             distance: 10,
          //             time: "00:42:02"
          //           },
          //           {
          //             name: "13公里",
          //             distance: 13,
          //             time: "00:56:44"
          //           },
          //           {
          //             name: "15公里",
          //             distance: 15,
          //             time: "01:03:01"
          //           },
          //           {
          //             name: "18公里",
          //             distance: 18,
          //             time: "01:21:18"
          //           },
          //           {
          //             name: "20公里",
          //             distance: 20,
          //             time: "01:24:20"
          //           },
          //           {
          //             name: "21.0975公里",
          //             distance: "21.0975",
          //             time: "01:29:47"
          //           },
          //           {
          //             name: "23公里",
          //             distance: 23,
          //             time: "01:34:29"
          //           },
          //           {
          //             name: "25公里",
          //             distance: 25,
          //             time: "01:46:06"
          //           },
          //           {
          //             name: "27公里",
          //             distance: 27,
          //             time: "01:55:13"
          //           },
          //           {
          //             name: "30公里",
          //             distance: 30,
          //             time: "02:08:36"
          //           },
          //           {
          //             name: "35公里",
          //             distance: 35,
          //             time: "02:33:11"
          //           },
          //           {
          //             name: "40公里",
          //             distance: 40,
          //             time: "02:59:56"
          //           }
          //         ],
          //         position_total: 150,
          //         position_total_net: 153,
          //         position_gender: 13,
          //         position_gender_net: 15,
          //         position_age: 7,
          //         position_age_net: 8,
          //         position_age_gender: 7,
          //         position_age_gender_net: 8,
          //         certificate: "",
          //         state: "FINISH",
          //         created_at: "2018-03-06 11:42:57",
          //         updated_at: "2018-03-17 16:30:11",
          //         deleted_at: null,
          //         total: {
          //           overall: 16565,
          //           gender: 1234,
          //           agegroup: 12345
          //         },
          //         agegroup: {
          //           label: "35-39岁",
          //           age: [35, 39],
          //           to: "1983-03-24",
          //           from: "1979-03-25"
          //         }
          //       }
          //     }
          //   ]
          // };
          if (res.data.code == 200) {
            this.isShowScores = true;
            //document.querySelector(".footerBanner").style.position='static'

            this.data = res.data.data;
            this.show = false;
            this.certificateImg = this.data[0].report.certificate_origin;

            //console.log(this.data[0].report.certificate_origin);
            // console.log(this.data)
            // console.log(res.data.data)
          } else {
            _this.$vux.toast.show({
              text: res.data.msg,
              type: "warn",
              onHide() {
                //window.location.href=window.location.host + "/baoming#/report"
                history.go(-1);
                //_this.$router.push({ path: "./reportlist" });
                //{ path: routerName, query: { race_id: raceId } }
                //window.location.href = `/#/reportlist`;
                //location.reload();
              }
            });
          }
        });
    }
  },
  components: {
    Tabbar,
    TabbarItem,
    XInput,
    Group,
    ViewBox,
    myFooter,
    XHeader,
    XButton,
    XImg,
    Toast,
    ToastPlugin,
    Myheader
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
#certificate .wrapper {
  margin: 10px;
}

.box {
  text-align: center;
  padding-top: 10px;
}

#credential .weui-btn {
  margin-bottom: 10px;
}

#credential img {
  width: 90%;
  margin: 0 auto;
}

#tabbar .weui-tabbar {
  position: fixed;
}

#credential .index-topf {
  margin-bottom: 100px;
  padding-top: 15px;
}

#credential h2 {
  font-size: 30px;
  text-align: center;
  color: #25a2ff;
  margin-top: 0;
}
</style>






